<template>
    <div class="home">
        <div class="rule">
            <div class="title">预约规则</div>
            <div>1、居民通过身份证、手机号信息实名预约</div>
            <div>2、每人每次限领{{info.limit}}个，每{{info.interval}}天可预约1次</div>
            <div>3、预约时间为{{appointmentWeek}} {{info.appointment}}，其他时间无法预约</div>
            <div>4、每天根据实际库存设置可预约量，发完为止</div>
            <div>5、预约后凭取货码、身份证到对应线下网点提取</div>
            <div>6、{{info.duedate}}天后未取货，取货码失效，口罩资源放出</div>
        </div>
        <div class="submit clearfix">
            <el-button type="primary" @click="jump('/apply')">实名预约口罩</el-button>
            <el-button class="primary" @click="jump('/history')">我的历史预约</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                info: {},
                weekList: [
                    {
                        value: 0,
                        label: '周日'
                    },
                    {
                        value: 1,
                        label: '周一'
                    },
                    {
                        value: 2,
                        label: '周二'
                    },
                    {
                        value: 3,
                        label: '周三'
                    },
                    {
                        value: 4,
                        label: '周四'
                    },
                    {
                        value: 5,
                        label: '周五'
                    },
                    {
                        value: 6,
                        label: '周六'
                    }
                ],
                appointmentWeek: ''
            }
        },
        mounted() {
            this.getInfo()
        },
        methods: {
            getInfo() {
                this.$http.get('/index/information').then(result => {
                    if (result.success) {
                        this.info = result.data
                        let appointmentWeek = result.data.appointmentWeek.split(','), msg = [], _this = this
                        if (appointmentWeek.length > 0) {
                            appointmentWeek = appointmentWeek.sort()
                            appointmentWeek.map(e => {
                                _this.weekList.map(list => {
                                    if (list.value === Number(e)) msg.push(list.label)
                                })
                            })
                        }
                        this.appointmentWeek = msg.join('、')
                    }
                })
            },
            jump(path) {
                let _this = this
                if (path === '/apply') {
                    this.$http.get('/index/off?noAlert=true').then(result => {
                        if (result.success) {
                            open(path)
                        } else {
                            this.$vux.alert.show({
                                content: result.message
                            })
                        }
                    })
                } else {
                    open(path)
                }

                function open(path) {
                    if (_this.$method.getSystem().isWx) {
                        window.open(location.origin + path, '_self')
                    } else {
                        _this.$router.push(path)
                    }
                }
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .home {
        .rule {
            .title {
                font-weight: bolder;
                color: #f2b75d;
                line-height: .5rem;
                margin-bottom: .1rem;
            }

            background-color: #fff;
            padding: .3rem .2rem;
            word-break: break-all;
        }
    }

    .submit {
        min-height: .88rem;
        line-height: .88rem;
        /*width: 90%;*/
        /*margin: 0 auto;*/
        margin-top: .5rem;
        display: block;

        .el-button {
            display: block;
            width: 90%;
            text-align: center;
            border: 1px solid #409EFF;
            border-radius: .06rem;
            margin: 0 auto;

            & + .el-button {
                margin-top: .3rem;
            }

            &.el-button--primary {
                background-color: #409EFF;
            }

            &.primary {
                color: #409EFF;
            }
        }
    }
</style>
